<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>综合管理地图部分</title>
  <link rel="stylesheet" href="src/css/index.css">
  <link rel="stylesheet" href="src/css/zhgl.css">
  <link rel="stylesheet" href="src/css/bootstrap.min.css">
  <!--下拉条美化  -->
  <link rel="stylesheet" href="src/lib/scrollbar/jquery.mCustomScrollbar.min.css">
  <link rel="stylesheet" href="src/css/wlw.css">
  <link rel="stylesheet" href="src/css/wlw-yjg.css">
  <link rel="stylesheet" href="src/css/xfs.css">
  <link rel="stylesheet" href="src/css/ludeng.css">

</head>

<body>
  <div id="zhgl-map">
    <div id='map' class="hescgis-map"></div>
    <div class="zhgl-map-header dis-none">
      <div class="header-search">
        <div class="search-group">
          <input class="zhgl-input" type="text" name="" value="" placeholder="输入关键词搜索">
          <div class="zhgl-close">
            <img src="src/image/icon_close.png" alt="">
          </div>
          <button type="button" name="button" class="zhgl-btn btn-blue zhgl-search-button"><img src="src/image/icon_search.png" alt=""></button>
        </div>

      </div>
      <div class="header-admin">
        <div class="header-admin-image">
          <img src="src/image/map-header.png" alt="">
        </div>
      </div>

      <div class="header-tab">

        <ul class="tab-list">
          <li class="tab-list-li ">
            <a href="#" class="tab-list-span tab-li-data" style="display:inline-block;width:70px">物联网
           </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="wl-map-equip">
      <div class="wlw-sum">
        <table class="wlw-detail">
          <tr class="sum-top"><td class="wlw-title">实时状态</td><td>  <span class="icon-zhuang"><span class="yuan-icon green"></span>在线</span></td><td><span class="icon-zhuang"><span class="yuan-icon yellow"></span>离线</span>
          </td><td><span class="icon-zhuang"><span class="yuan-icon gray"></span>失联</span></td><td><span class="icon-zhuang"><span class="yuan-icon red"></span>告警</span>
          </td></tr>
          <tr class="item-tr item-active" onclick="clickDevLi(1)"><td><img src="src/image/jingai.png" alt="">窨井盖</td><td>40</td><td>2</td><td>1</td><td><span class="red-border img-con">2<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(2)"><td><img src="src/image/ludeng.png" alt="">路灯</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(3)"><td><img src="src/image/xiaofangshuan.png" alt="">消防栓</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(4)"><td><img src="src/image/tingche.png" alt="">停车</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(5)"><td><img src="src/image/lajitong.png" alt="">垃圾桶</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(6)"><td><img src="src/image/wurenji.png" alt="">无人机</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>
          <tr class="item-tr" onclick="clickDevLi(7)"><td><img src="src/image/huanjing.png" alt="">环境监测</td><td>40</td><td>2</td><td>1</td><td><span class="img-con">0<img src="src/image/xiaosanjiao.png" alt="" class="xiaojiao"></span></td></tr>

        </table>
      </div>
    </div>
    <div class="wlw-item wlw-sum" style="overflow: auto;">
      <p class="jyg-top jiankong"><span class="zhuangjian">状态监控</span><span class="shuline"></span></p>
      <table class="shebei-detail shebei-detail1" >
        <tr><th>设备编号</th><th>剩余电量(%)</th><th>倾斜角度</th><th>信号强度</th><th>电池电压</th></tr>



      </table>
    </div>
    <div class="wlw-item wlw-sum wlw-ld">
      <div class="moban-tab xfs1" >
        <p class="jyg-top"><span class="zhuangjian">路灯</span></p>
        <div class="ludeng-title">
            <span style="margin-right:10px">能耗监控</span> 今年累计消耗 : <span class="thisyear" style="margin-right:10px"></span> 本月累计消耗 : <span class="thismonth"></span>
        </div>
        <div class="ludeng-chart" id="ludeng-chart" style="width:448px;height:230px">

        </div>
      </div>
    </div>
    <div class="wlw-item wlw-sum wlw-xfs">
      <div class="moban-tab xfs1" >
        <p class="jyg-top"><span class="zhuangjian">闷盖心跳记录：</span></p>
        <table class="shebei-detail shebei-detail2" >
          <tr><th>设备编号</th><th>剩余电量</th><th>旋转角度</th><th>环境温度</th><th>信号强度</th><th>电池电压</th></tr>



        </table>
      </div>
      <div class="moban-tab xfs1" style=" position: absolute;top: 0px;left: 500px">
        <p class="jyg-top"><span class="zhuangjian">水压心跳记录：</span><span class="zhankai" id="zhankai">展开>></span></p>
        <table class="shebei-detail shebei-detail3" >
          <tr><th>设备编号</th><th>剩余电量</th><th>旋转角度</th><th>环境温度</th><th>信号强度</th><th>电池电压</th></tr>




        </table>
      </div>
      <div class="moban-tab xfs2 dis-none" >
        <p class="jyg-top"><span class="zhuangjian">消防栓</span></p>
        <p class="jyg-top ca-bor"><span class="richang">日常监控</span><span class="shuline"></span></p>
        <div class="wlw-xiaofang-chart" id="xiaofangshuang-chart" style="width: 430px;height: 180px">

        </div>
      </div>
      <div class="moban-tab xfs2 dis-none" style="  position: absolute;top: 0px;left: 500px">
        <p class="jyg-top"><span class="zhuangjian">告警分析</span><span class="zhankai" id="shouqi">收起<<</span></p>
        <div class="chart-container" id="gaojing" style="width: 200px;height:90px">

        </div>
        <div class="gaojing-detail">
          <ul class="yjg-gaojing">

          </ul>
        </div>

        <p class="qushi">警情趋势</p>
        <div class="chart-container" id="qushi" style="width: 430px;height: 120px">

        </div>
      </div>
    </div>
    <div class="wlw-item wlw-tingche clearfix">
      <div class="tingche fl">
        <div class="tingche-title">
          <h2>停车位</h2>
        </div>
        <div class="tingche-echart" id="tingche-echart"></div>
      </div>
      <div class="chewei fl">
        <div class="chewei-title">
          <h2>车位监控</h2>
        </div>
        <div class="chewei-echart " id="chewei-echart"></div>
      </div>
    </div>
    <div class="wlw-item wlw-ljt">
      <div class="moban-tab xfs1" >
        <p class="jyg-top"><span class="zhuangjian">垃圾桶</span></p>
        <div class="lajitong-box-container">
                  <div class="lajitong-box">
                    <div class="lajitong-left">
                      <div class="lajitong-svg" id="lajitong001">

                      </div>
                      <div class="lajitong-name">
                        GWH001
                      </div>
                    </div>
                    <div class="lajitong-right">
                      <div class="">
                        电压：<span class="blue-color dianya-span">25V</span>
                      </div>
                      <div class="lajitong-right-middle">
                        定位：
                        <div class="blue-color">
                          N ： <span class="jingdu-span">30.369</span>
                        </div>
                        <div class="blue-color">
                          E ：<span class="weidu-span">120.335</span>
                        </div>
                      </div>
                      <div class="blue-color lajitong-more lajitong-btn " style="cursor:pointer" target="0">
                        MORE >>
                      </div>
                    </div>
                  </div>
                  <div class="lajitong-box">
                    <div class="lajitong-left">
                      <div class="lajitong-svg " id="lajitong002">

                      </div>
                      <div class="lajitong-name">
                        GWH002
                      </div>
                    </div>
                    <div class="lajitong-right">
                      <div class="">
                        电压：<span class="blue-color dianya-span">25V</span>
                      </div>
                      <div class="lajitong-right-middle">
                        定位：
                        <div class="blue-color">
                          N ： <span class="jingdu-span">30.369</span>
                        </div>
                        <div class="blue-color">
                          E ：<span class="weidu-span">120.335</span>
                        </div>
                      </div>
                      <div class="blue-color lajitong-more lajitong-btn" style="cursor:pointer" target="1">
                        MORE >>
                      </div>
                    </div>
                  </div>
                  <div class="lajitong-box">
                    <div class="lajitong-left">
                      <div class="lajitong-svg " id="lajitong003">

                      </div>
                      <div class="lajitong-name">
                        GWH003
                      </div>
                    </div>
                    <div class="lajitong-right">
                      <div class="">
                        电压：<span class="blue-color dianya-span" >25V</span>
                      </div>
                      <div class="lajitong-right-middle">
                        定位：
                        <div class="blue-color">
                          N ： <span class="jingdu-span">30.369</span>
                        </div>
                        <div class="blue-color">
                          E ：<span class="weidu-span">120.335</span>
                        </div>
                      </div>
                      <div class="blue-color lajitong-more lajitong-btn" style="cursor:pointer" target="2">
                        MORE >>
                      </div>
                    </div>
                  </div>
                  <div class="lajitong-box">
                    <div class="lajitong-left">
                      <div class="lajitong-svg " id="lajitong004">

                      </div>
                      <div class="lajitong-name">
                        GWH004
                      </div>
                    </div>
                    <div class="lajitong-right">
                      <div class="">
                        电压：<span class="blue-color dianya-span">25V</span>
                      </div>
                      <div class="lajitong-right-middle">
                        定位：
                        <div class="blue-color">
                          N ： <span class="jingdu-span">30.369</span>
                        </div>
                        <div class="blue-color">
                          E ：<span class="weidu-span">120.335</span>
                        </div>
                      </div>
                      <div class="blue-color lajitong-more lajitong-btn" style="cursor:pointer" target="3">
                        MORE >>
                      </div>
                    </div>
                  </div>
                </div>
      </div>
    </div>
    <div class="wlw-item wlw-wrj">
      <div class="wurenji-div">
          <iframe src="http://www.aihangtec.com/show.html" width="920" height="500"></iframe>
      </div>
    </div>

    <div class="wlw-item wlw-hj">
      <div class="hj-back">
         <img src="src/image/huanjing_back.png" alt="">
      </div>
      <div class="hj-number">
          <ul class="hj-list">
              <li class="hj-li" ><span id="wendu-data">27</span>°C</li>
              <li class="hj-li" ><span id="shidu-data" style="margin-left:20px">42</span>%RH</li>
              <li class="hj-li" ><span id="qita-data">1.01</span>Pa</li>
              <li class="hj-li" ><span id="pm-data" style="margin-left:20px">50</span></li>
              <li class="hj-li" ><span id="zhaodao-data">4</span>级</li>
              <li class="hj-li" ><span id="fengsu-data" style="margin-left:20px">3</span>级</li>
              <li class="hj-li" ><span id="fengxiang-data">南风</span></li>

          </ul>
      </div>
      <!-- <div class="moban-tab xfs1" >
        <p class="jyg-top"><span class="zhuangjian">环境监测</span></p>
        <div class="">

        </div>
      </div> -->
    </div>

    <div class="wl-map-window wl-map-normal" style="display: none">

    </div>
    <div class="wl-map-window wl-map-car" style="display: none">

    </div>
    <div class="wl-map-window wl-map-ludeng" style="display: none">

    </div>


  </div>

  <script type="text/javascript" src="src/lib/jquery.js"></script>
  <script type="text/javascript" src="src/lib/echarts/echarts.js"></script>
  <script type="text/javascript" src="src/lib/echarts/echarts.common.js"></script>
  <script type="text/javascript" src="src/lib/echarts/echarts-liquidfill.js"></script>
  <script type="text/javascript" src="src/lib/jquery-ui/jquery-ui.js"></script>
  <script type="text/javascript" src="src/lib/calendar/laydate.js"></script>
  <script type="text/javascript" src="src/lib/fenye/dist/pagination.min.js"></script>
  <script type="text/javascript" src="src/lib/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
  <script type="text/javascript" src="src/lib/drag.js"></script>
  <script type="text/javascript" src="src/js/jiekou.js"></script>
  <script type="text/javascript" src="src/js/index.js"></script>
  <script type="text/javascript" src="src/js/map/ol-debug.js"></script>
  <script type="text/javascript" src="src/js/map/proj4-2.3.11.js"></script>
  <script type="text/javascript" src="src/js/map/map.js"></script>
  <script type="text/javascript" src="src/js/wlw.js"></script>
  <script type="text/javascript" src="src/js/che.js"></script>
  <script type="text/javascript" src="src/js/xfs.js"></script>
  <script type="text/javascript" src="src/js/ludeng.js"></script>

</body>

</html>
